<template>
  <div class="versionlist-page">
    <el-table :data="versionList" style="width: 100%" fit>
      <el-table-column prop="dcVersion" label="版本" width="280">
        <template #default="scope">
          <div v-if="scope.$index === 0">
            <span>{{ scope.row.dcVersion }}</span> &nbsp;&nbsp;
            <el-tag color="#6366f1" style="--el-tag-text-color:#fff"> 最新版本 </el-tag>
          </div>
          <div v-else>
            <span>{{ scope.row.dcVersion }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="描述">
        <template #default="scope">
          <span v-html="convertNewLineToBr(scope.row.description)"></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button v-if="scope.row.status === 0" type="primary" color="#6366f1" disabled>
            下载中
          </el-button>
          <el-popconfirm v-if="scope.row.status == 1" hide-icon width="320" confirm-button-text="确认" cancel-button-text="取消"
             title="确定升级吗？" @confirm="upgradeVersionFn(scope)" style="--el-button-bg-color:#6366f1">
            <template #reference>
              <el-button type="primary" color="#6366f1">
                一键升级
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <div class="footer dialog-footer-btn" style="text-align: center;margin-top: 10px;">
      <el-button color="#6366f1" @click="closeVersionModal">确定</el-button>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { upgradeDcVersion } from '@/api/index.js'
const emit = defineEmits(['closeVersionModal'])
const props = defineProps({
  versionList: {
    type: Array,
    default: []
  }
})

// 将\n转换为br
const convertNewLineToBr = (text) => {
  return text.replace(/\n/g, "<br/>")
}
// 点击 一键升级 操作
const upgradeVersionFn = (data) => {
  ElMessage.info('正在升级中该过程预计30S，请耐心等待')
  upgradeDcVersion({ dcVersion: data.row.dcVersion }).then(res => {
    if (res.data.code === '200') {
      ElMessage.success('升级成功')
    }
  }).catch(err => {
    ElMessage.error('升级失败')
  })
}
const closeVersionModal= ()=> {
  emit('closeVersionModal')
}
</script>

<style scoped>
.versionlist-page{

}
</style>
<style>
.el-popconfirm__main{
  text-align: center;
}
.el-popconfirm__action{
  .el-button--primary{
    --el-button-bg-color:#6366f1;
  }
}
.el-button:hover {
    background-color: #6366f1;
    border-color: #6366f1;
    outline: none;
}
</style>